<template>
    <div>
        <el-dialog v-model="props.isShow" :title="props.isAdd ? '添加管理员' : '编辑管理员'" center :before-close="beforeClose">
            <el-form :model="userForm" :rules="rules" ref="userRef">

                <el-form-item label="所属角色" :label-width="formLabelWidth" prop="roleid">
                    <el-select v-model="userForm.roleid" placeholder="请选择所属角色">
                        <el-option v-for="item in store.getters['role/getRoleList']" :key="item.id" :label="item.rolename"
                            :value="item.id" />
                    </el-select>
                </el-form-item>

                <el-form-item label="用户名称" :label-width="formLabelWidth" prop="username">
                    <el-input v-model="userForm.username" autocomplete="off" />
                </el-form-item>
                <el-form-item label="密码" :label-width="formLabelWidth">
                    <el-input v-model="userForm.password" autocomplete="off" />
                </el-form-item>
                <el-form-item label="状态" :label-width="formLabelWidth">
                    <el-switch v-model="userForm.status"
                        style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949" :active-value="1"
                        :inactive-value="2" />
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="cancel(userRef)">取消</el-button>
                    <el-button type="primary" @click="confirm(userRef)">确定</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>
<script lang='ts' setup>
import { reactive, ref, defineProps, defineEmits, defineExpose } from 'vue'
import type { FormInstance, FormRules } from 'element-plus';
import { useStore } from 'vuex';
import { useradd, userinfo, useredit } from '../../request/api';
import { ElMessageBox, ElMessage } from 'element-plus';

// 调用子传父通信
let emit = defineEmits(['cancel']);
// 调用仓库方法
let store = useStore();
const userRef = ref<FormInstance>();
const rules = reactive<FormRules>({
    username: [
        { required: true, message: '请填写用户名称', trigger: 'blur' },
        { min: 2, max: 6, message: '长度2-6位字符', trigger: 'blur' },
    ],
    roleid: [
        {
            required: true,
            message: '请选择所属角色',
            trigger: 'change',
        },
    ]
})
const formLabelWidth = '120px';

const userForm = ref({
    roleid: '',//  角色编号  number 
    username: '',//  管理员名称  string 
    password: '',//  密码  string 
    status: 1,//  状态  1正常2禁用  number 
})

// 接收父组件传参
let props = defineProps({
    isAdd: Boolean,
    isShow: Boolean
})

// 重新调用角色列表  如果之前调用过  就不需要重新调用
if (store.getters['role/getRoleList'].length == 0) {
    store.dispatch('role/getRoleListActions')
}

// 点击x号  关闭弹窗 清空表单和规则
const beforeClose = (done: any) => {
    done();
    cancel(userRef.value);
}
// 点击取消  关闭弹窗 重置表单 清空规则验证
const cancel = (formEl: undefined | FormInstance) => {
    // 通知父元素
    emit('cancel');
    if (!formEl) return;
    // 置空表单
    userForm.value = {
        roleid: '',//  角色编号  number 
        username: '',//  管理员名称  string 
        password: '',//  密码  string 
        status: 1,//  状态  1正常2禁用  number 
    }

    // 清空规则
    formEl.resetFields();
}

// 数据回显
const lookup = (uid: number) => {
    userinfo({ uid }).then((res: any) => {
        if (res.code == 200) {
            // console.log(res.list);
            userForm.value = res.list;
            // 不修改不需要展示密码
            userForm.value.password = '';
        }
    })
}

// 点击确定 
const confirm = async (formEl: undefined | FormInstance) => {
    // console.log(userForm.value, '表单');
    if (!formEl) return
    await formEl.validate(val => {
        if (val) {
            if (props.isAdd) {
                // 添加
                useradd(userForm.value).then(res => {
                    if (res.code == 200) {
                        // 添加成功
                        ElMessage.success(res.msg);
                        // 关闭弹窗
                        cancel(userRef.value);
                        // 重新渲染视图
                        store.dispatch('user/getUserListActions');
                        // 重新获取总页码
                        store.dispatch('user/getCountActions')
                    }
                })
            } else {
                // 编辑
                useredit(userForm.value).then(res => {
                    if (res.code == 200) {
                        // 编辑成功
                        ElMessage.success(res.msg);
                        // 关闭弹窗
                        cancel(userRef.value);
                        // 重新渲染视图
                        store.dispatch('user/getUserListActions');
                    }
                })
            }
        }
    })

}

defineExpose({
    lookup
})
</script>
<style scoped lang='less'></style>